<template>
	<div>
		<ChoiseHeader :choiseList='choiseList' @chageData ='chageData'></ChoiseHeader>
		<scroll-view class='jia' scroll-y>
	        <div class='jia-item' v-for="(item ,idx) in rakingsDatas" :key='idx'  >
	          <div class='j-name'> <img v-if="idx < 3"   :src="'../../static/images/'+(idx+1)+'.png'"> {{item.name}} </div>
	          <div class='j-count'>共{{item.makerCode}}台</div>
	          <div class='j-totle'>{{pageText.saleTotal}} <text>￥{{item.orderPay}} </text></div>
	        </div>
      	</scroll-view>
	</div>
</template>

<script type="text/javascript">
	import ChoiseHeader from '@/components/ChoiseHeader'
	export default{
		props:['dateList','typeList','rakingsDatas'],
		data(){
			return {
				dates:[],
				types:[],
				rakingsDatas:[],
				pageText:{
					'saleTotal': '销售合计',
				}
			}
		},
		computed:{
			choiseList(){
				let list = []
				list = [ this.types,this.dates]
				return  list
			},
			rankingsImg(){
				return '../../static/images/'
			}
		},

		components:{
			ChoiseHeader
		},
		mounted(){
			console.log(this.dateList)
		},
		methods:{
			chageData(item,idx){
				if(idx == 0){
					this.$emit('chanageType', item)
				}else{
					this.$emit('chanageDate', item)
				}	
			}
		},
		watch:{
			dateList(newData,olddata){
				this.dates = newData
			},
			typeList(newData){
				this.types = newData
			}
		}
	}
</script>

<style>
.rankings{
    position: fixed;
    top: 90rpx;
    left: 0;
    right: 0;
    bottom: 0rpx;
}
.order-nav{
   
    left: 0;
    right: 0;
    font-size: 22rpx;
    background: #fff;
    height: 80rpx;
    line-height: 80rpx;
    z-index: 3
}


.rankings-list{
    padding-top: 100rpx;
    padding-bottom: 80rpx;
}
.rankings-item{
    display: flex;
    padding: 20rpx;
    background: #fff;
    margin: 0 20rpx 30rpx 20rpx;
}
.rankings-img image{
    width: 140rpx;
    height: 140rpx;
    border-radius:10rpx;
}
.rankings-desc{
    padding-left: 20rpx;
    font-size: 26rpx;
    line-height: 40rpx;
}
.rankings-desc view{
    margin-bottom: 10rpx;
}
.rankings-desc view text{
    color: red;
}

.data-item{
    display: flex;
    padding: 20rpx;
    margin: 0rpx 10rpx 30rpx 10rpx;
    background: #fff;
    
}
.data-time{
    width: 150rpx;
    height: 150rpx;
    position: relative;
    font-size: 24rpx;
   
    color: #fff;
     text-align: center;
}
.data-time .time-bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 150rpx;
    height: 150rpx;
}
.data-time .time-text{
    position: absolute;
    z-index: 2;
    color: #000;
    width: 100%;
}
.data-time image{
    position: absolute;
    /* z-index: -1; */
    width: 100%;
}
.time-data{
    font-size: 52rpx;
    padding-top: 0rpx;
    margin-bottom: 5rpx;
}
.time-data text{
    font-size: 22rpx;
}
.data-order{
    border-right: 2rpx solid #eaeaea;
}
.data-order,.data-sales{
    flex: 1;
    text-align: left;
    line-height: 50rpx;
    font-size: 22rpx;
    color: #999999

}
.data-order view,.data-sales view{
    padding-left: 10rpx;
}
.data-item .num{
    color: red;
}
.total-num{
   color: #000;
    margin: 0 auto;
    border-top: 2rpx solid #eaeaea;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 23rpx;
    font-weight: 600 ;

}

.data-list{
    padding-bottom: 80rpx;

}

.jia{
 position: absolute;
  top: 160rpx;
  bottom: 80rpx;
}
.jia-item{
  display: flex;
 line-height: 80rpx;
  background: #ebeaea;
  margin: 20rpx;
  text-align: center;
  font-size: 26rpx;
  position: relative;
}
.j-name image{
  width: 36rpx;
  height: 36rpx;
  vertical-align: middle;
  position: absolute;
  left: 10rpx;
  top: 24rpx;
}
.j-name{
  width: 200rpx;
  text-align: left;
  padding-left: 54rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.j-totle{
  flex: 1;
  font-size: 26rpx;
}
.j-totle text{
  color: red;
}

</style>